<template>
  <div class="userAddBox">
    <el-form ref="userAddFormRef" :rules="userAddFormRules" :model="userAddForm" label-width="120px">
      <el-form-item label="用户名：" prop="fUserAccount">
        <el-input v-model="userAddForm.fUserAccount"></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="fUserPassword">
        <el-input type="password" v-model="userAddForm.fUserPassword"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名：" prop="fUserRealName">
        <el-input v-model="userAddForm.fUserRealName"></el-input>
      </el-form-item>
      <el-form-item label="用户头像：" prop="fUserPhoto">
        <el-upload action="/api/uploadFile/singleUploadFile" :headers="headers" list-type="picture-card" ref="uploadaRef" :on-success="handleAvatarSuccess" :on-change="uploadChange" :limit="1" :class="{hide:hideUpload}">
          <template #file="{file}">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="userAddForm.fUserPhoto" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="handleRemove">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </template>
          <template #default>
            <i class="el-icon-plus"></i>
          </template>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img width="100%" :src="userAddForm.fUserPhoto" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="创建时间：" prop="fCreateDate">
        <el-date-picker v-model="userAddForm.fCreateDate" format="YYYY-MM-DD" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="性别：" prop="fUuserSex">
        <el-select v-model="userAddForm.fUuserSex" placeholder="请选择">
          <el-option v-for="item in fUuserSexOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号：" prop="fUserCardId">
        <el-input v-model="userAddForm.fUserCardId"></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="fUserMobile">
        <el-input v-model="userAddForm.fUserMobile"></el-input>
      </el-form-item>
      <el-form-item label="邮箱：" prop="fUserEmail">
        <el-input v-model="userAddForm.fUserEmail"></el-input>
      </el-form-item>
      <el-form-item label="备注信息：" prop="fRemark">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="userAddForm.fRemark">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="submitForm">提交</el-button>
        <el-button size="small" @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import jsCookie from 'js-cookie'
import { User } from '@/api/apiConfig'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { checkIDCard } from '../../utils/checkIDCard'

export default defineComponent({
  setup(props, { emit }) {
    const headers = ref({
      token: jsCookie.get('token'),
    })
    const userAddFormRef = ref()
    let userAddForm = reactive({
      fUserAccount: '',
      fUserPassword: '',
      fUserRealName: '',
      fUserPhoto: '',
      fUuserSex: '',
      fUserCardId: '',
      fUserMobile: '',
      fUserCall: '',
      fUserEmail: '',
      fRemark: '',
      fCreateDate: '',
      fCreateId: '',
      fState: '1',
      fIsDel: '0',
      fIsSuper: '0',
      fIsExp: '0',
      fIsNor: '0',
    })
    const validatefUserCardId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入身份证号'))
      } else {
        if (checkIDCard(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的身份证号'))
        }
      }
    }
    let userAddFormRules = reactive({
      fUserAccount: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
      ],
      fUserPassword: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ],
      fUserRealName: [
        { required: true, message: '请输入用户姓名', trigger: 'blur' },
      ],
      fUserPhoto: [
        { required: true, message: '请上传用户头像', trigger: 'blur' },
      ],
      fUuserSex: [
        { required: true, message: '请选择用户性别', trigger: 'blur' },
      ],
      fUserCardId: [
        { required: true, validator: validatefUserCardId, trigger: 'blur' },
      ],
      fUserMobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
      ],
      fUserCall: [{}],
      fUserEmail: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
      fRemark: [{ required: true, message: '请添加备注信息', trigger: 'blur' }],
      fCreateDate: [
        { required: true, message: '请选择创建时间', trigger: 'blur' },
      ],
    })
    const fUuserSexOptions = ref([
      {
        value: '1',
        label: '男',
      },
      {
        value: '2',
        label: '女',
      },
      {
        value: '3',
        label: '保密',
      },
    ])
    const resetForm = () => {
      userAddFormRef.value.resetFields()
    }
    const dialogVisible = ref(false)
    const uploadaRef = ref()
    const hideUpload = ref(false)
    const handleAvatarSuccess = (file) => {
      userAddForm.fUserPhoto = file.data.filePath
    }
    const handlePictureCardPreview = () => {
      dialogVisible.value = true
    }
    const handleRemove = () => {
      uploadaRef.value.clearFiles()
      // hideUpload.value = fileList.length >= 1
      hideUpload.value = false
    }
    const uploadChange = (file, fileList) => {
      hideUpload.value = fileList.length >= 1
    }
    const router = useRouter()
    const submitForm = () => {
      userAddFormRef.value.validate((valid) => {
        if (valid) {
          let params = userAddForm
          User.createUser(params).then((res: any) => {
            if (res.statusCode === 200) {
              emit('sendToParent', false)
              ElMessage({
                message: '添加成功',
                type: 'success',
                onClose: function () {
                  router.push({
                    path: '/userlist',
                  })
                },
              })
            }
          })
        }
      })
    }
    return {
      userAddForm,
      userAddFormRef,
      userAddFormRules,
      resetForm,
      headers,
      handleAvatarSuccess,
      dialogVisible,
      handlePictureCardPreview,
      handleRemove,
      uploadaRef,
      hideUpload,
      uploadChange,
      fUuserSexOptions,
      submitForm,
    }
  },
})
</script>

<style scoped lang="scss">
.userAddBox {
  margin: 0 auto;
  padding: 20px;
  width: 45%;
  height: auto;
  .el-upload-list__item-thumbnail {
    width: 148px;
    height: 148px;
  }
  .el-dialog__body {
    img {
      width: 100%;
    }
  }
}
</style>